import React, { useState, useImperativeHandle, forwardRef, useEffect } from 'react';
import { Row, Col, Button, Tooltip } from 'antd';
import { connect } from 'umi';
import { goodsType_status, categoryType_status } from '@/common/contact'
import TableDataBlock from '@/components/TableDataBlock';
import SelectModel from './components/SelectModel'
import Select from '@/components/FormCondition/Select'
import Input from '@/components/FormCondition/InputNumber'
import PopImgShow from '@/components/PopImgShow';
import FormItem from 'antd/es/form/FormItem';
import { AuditOutlined, FileTextOutlined } from '@ant-design/icons'
const SettingOpeational = (props, ref) => {
  const { detail = {}, defaultDataList = [], disabled = false, } = props
  const [data, setData] = useState([])

  const [visible, setVisible] = useState(false)
  useEffect(() => {
    if (defaultDataList.length > 0) {
      setData(defaultDataList)
    }
  }, [defaultDataList])
  useImperativeHandle(ref, () => {
    return {
      getMaterial: () => {
        return data.map(item => {
          return item.id
        })
      }
    }
  })
  function getFileExtension(fileName) {
    // 使用正则表达式匹配文件名中的后缀部分
    const regex = /(?:\.([^.]+))?$/;
    const result = regex.exec(fileName);

    // 提取匹配到的后缀，如果没有后缀则返回空字符串
    const extension = result ? result[1] : '';

    return extension;
  }
  const renderContent = (url, type, falg = true) => {
    if (type === 'image') {
      return <PopImgShow width={30} url={url}></PopImgShow>
    } else if (type === 'video') {
      return <PopImgShow width={30} url={url}></PopImgShow>
    } else if (type === 'voice') {
      return <Tooltip title={url}>
        <a style={{ fontSize: 24 }} target="_blank" href={url}><AuditOutlined></AuditOutlined></a>
      </Tooltip>
    }
    else if (type === 'ebook') {
      return <Tooltip title={url}>
        <a style={{ fontSize: 24 }} target="_blank" href={url}><FileTextOutlined></FileTextOutlined></a>
      </Tooltip>
    } else {
      const fileExtension = getFileExtension(url);
      const color = {
        pptx: '#2db7f5',
        ppt: '#87d068',
        docx: '#108ee9',
        doc: '#2db7f5',
        xls: '#87d068',
        xlsx: '#108ee9',
        pdf: '#2db7f5',
        csv: '#87d068',
        xlsm: '#2db7f5',
        txt: '#87d068',
        zip: '#2db7f5',
        vtt: '#f50'
      }[fileExtension]
      console.log(color)
      return <Tooltip title={url}><div style={{ background: color || 'red', color: '#Ffffff', width: 36, height: 36, display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto' }}>{fileExtension}</div></Tooltip>
    }
  }
  const getColumns = [
    {
      title: '素材名称',
      dataIndex: 'materialName',
    },
    {
      title: '素材类型',
      dataIndex: 'contentType',
      render: (e) => {
        return categoryType_status[e]
      }
    },
    {
      title: '封面图',
      dataIndex: 'content',
      render: (e, record) => {
        const { contentType, cover = '{}' } = record
        if (contentType === 'video') {
          const { url } = JSON.parse(cover);
          return renderContent(url, contentType);
        }
        const { url } = JSON.parse(e);
        return renderContent(url, contentType);
      },
    },
    {
      type: 'handle',
      width: 200,
      dataIndex: 'id',
      render: (val, record) => [
        {
          title: '移除',
          click: () => {
            setData(data.filter(item => {
              return item.id !== val
            }))
          }
        }]
    }]
  return (
    <Row style={{ marginBottom: 24 }}>
      <Col style={{ textAlign: 'right' }} span={6}>
        相关资料:
      </Col>
      <Col style={{ marginLeft: 4 }} gutter={[24, 24]}>
        <Button
          disabled={disabled}
          onClick={() => {
            setVisible({ show: true, details: data });
          }}
        >

          +添加资料
        </Button>
      </Col>
      {data.length > 0 && <Col style={{ marginTop: 12 }} offset={6} span={18}>
        <TableDataBlock
          columns={getColumns}
          rowKey={(record) => `${record.id}`}
          list={data}
        ></TableDataBlock>
      </Col>}

      <SelectModel onOk={setData} visible={visible} data={detail} onClose={() => setVisible(false)}></SelectModel>
    </Row>
  )
};
export default forwardRef(SettingOpeational)